<template>
	<div class="addment">
		<div style="height: 20px;background: #1E82D2 ;"></div>
		<!--<mt-header title="设备添加"  style='background: #1E82D2;font-size: 1.125rem;height: 3rem;' >
		<router-link to="/writeallorder" slot="left">
		     <i class="material-icons left_1" style="color: #fff;">chevron_left</i>
		 </router-link>
		</mt-header>-->
		<x-header  class='head' :left-options="{backText: ''}">设备添加</x-header>


		<div class="apply">
			<div class="apply-title">
				设备明细
			    </div>
			<!--<div class="apply-c">
			<div class="choice">
			<div class="choice-c">
			<span>设备类型</span>
	        <select class="choice-k">
			  <option value ="请选择设备类型">请选择使用单位</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>

	        <div class="choice">
			<div class="choice-c">
			<span>设备名称</span>
	        <select class="choice-k">
			  <option value ="请选择设备类型">请选择设备名称</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>


	        <router-link :to="{path:'/factory'}" style='color: #000;'>
	        <div class="choice">
			<div class="choice-c">
			<span>厂家型号</span>
	        <div class="choice-d">
				  请选择厂家型号
				</div>
			</div>
	        </div>
	        </router-link>


	        <router-link :to="{path:'/materiel'}" style='color: #000;'>
	        <div class="choice">
			<div class="choice-c">
			<span>物料号</span>
	        <div class="choice-d">
				  请选择物料号
				</div>
			</div>
	        </div>
	        </router-link>


            <div class="choice">
			<div class="choice-c">
			<span>设备单位</span>
	        <select class="choice-k">
			  <option value ="请选择设备类型">请选择设备单位</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>

	        <div class="choice">
			<div class="choice-c">
			<span>申请数量</span>
	        <input type="number" />
			</div>
	        </div>




	        <div class="adress choice">
			<div class="adress-c  choice-c">
			<div style="width: 41.5%;float: left;font-size: .8rem;line-height: 2rem;">备注</div>
	        <textarea  placeholder="备注" type="textarea" rows="5"  class="text"></textarea>
			</div>
	        </div>

			</div>-->

			<group gutter='0px'>
		    <popup-picker class='popup' title="设备类型" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
		    <popup-picker class='popup' title="设备名称" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
		    <cell class='popup' title="厂家型号" value="请选择厂家型号">
		    	<router-link :to="{path:'/factory'}" style='color: #999;'>请选择厂家型号</router-link>
		    </cell>
		    <cell class='popup' title="物料号" value="请选择物料号">
		    	<router-link :to="{path:'/materiel'}" style='color: #999;'>请选择物料号</router-link>
		    </cell>
		    <x-input class='popup' title="统一编号" v-model="value"></x-input>
            <popup-picker class='popup' title="设备单位" :data="list3" v-model="value3" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
            <x-input class='popup' title="申请数量" v-model="value"></x-input>
            <datetime class='popup' v-model="valuedata" @on-change="change" title="要求到货时间"></datetime>
		    <x-textarea class='popup' title="备注:"  placeholder='备注'></x-textarea>
		    </group>
		</div>

		<button class="queren">确定</button>


	</div>
</template>

<script>
import PopupPicker from 'vux/src/components/Popup-picker/index'
import Group from 'vux/src/components/group/index'
import XInput from 'vux/src/components/x-input/index'
import XTextarea from 'vux/src/components/x-textarea/index'
import Datetime from 'vux/src/components/datetime/index'
import { XHeader, Cell } from 'vux'

export default {
  data() {
    return {
      value: '',
      valuedata: '2015-11-12',
      value1: ['请选择设备类型'],
      value2: ['请选择设备名称'],
      value3: ['请选择设备单位'],
      value4: ['请选择工程项目'],
      list1: [['主机', '主机配件', '111', '222', '333']],
      list2: [['主机', '主机配件', '111', '222', '333']],
      list3: [['在用', '闲置']],
      list4: [['主机', '主机配件', '111', '222', '333']]
    }
  },
  components: {
    PopupPicker,
    Group,
    XInput,
    XTextarea,
    Datetime,
    Cell,
    XHeader
  },
  methods: {
    onChange(val) {
      console.log('val change', val)
    },
    change(value) {
      console.log('change', value)
    },
    onShow() {
      console.log('on show')
    },
    onHide(type) {
      console.log('on hide', type)
    }
  }
}
</script>

<style scoped>
.apply {
  width: 94%;
  margin-left: 3%;
  background: #fff;
  margin-top: 0.5rem;
  border-radius: 6px;
  min-height: 25.5rem;
}
.apply-c {
  padding: 0.5rem;
}
.apply-title {
  line-height: 2rem;
  font-size: 0.8rem;
  padding-left: 15px;
  background: #f8f6f7;
  border-radius: 6px 6px 0 0;
}
.choice {
  width: 100%;
  height: 2rem;
  background: #fff;
}
.choice-c {
  color: #606063;
}
.choice span {
  line-height: 2rem;
  font-size: 0.8rem;
  float: left;
  width: 40%;
}
.choice-k {
  width: 60%;
  float: right;
  line-height: 2rem;
  height: 2rem;
  border: none;
  font-size: 0.8rem !important;
  color: #606063;
}
.choice-k option {
  font-size: 0.8rem;
}
.choice-c input {
  border: none;
  float: right;
  width: 57.6%;
  height: 2rem;
  font-size: 0.8rem !important;
  color: #606063;
  float: left;
}
.adress {
  height: 4.5rem;
}
.choice-d {
  width: 58.7%;
  float: right;
  line-height: 2rem;
  height: 2rem;
  border: none;
  font-size: 0.8rem;
  display: inline-block;
}
.queren {
  width: 100%;
  height: 2.5rem;
  position: fixed;
  bottom: 0;
  background: #4a82c6;
  color: #fff;
  border: none;
}
.text {
  float: left;
  width: 58.5%;
  border: none;
  font-size: 0.8rem !important;
  color: #606063;
  margin-top: 0.5rem;
}
.popup {
  font-size: 0.8rem !important;
  color: #606063 !important;
}
.head {
  width: 100%;
  background: #1e82d2;
  font-size: 1.125rem;
  height: 3rem;
}
</style>
